<template>
  <view class="content">
    <view class="line">
      <view
        v-for="(item, index) in title"
        :key="index"
        @click="chooseClick(index)"
        :class="index == clickFooter ? 'addStyle' : ''"
      >
        {{ item }}
      </view>
    </view>

    <view v-for="(item, index) in myOptions" :key="index">
      <view class="p1-line lines">
        <view class="left">
          <view class="name-white">{{ item.name }}</view>
          <view class="name-gray">{{ item.repcode }}</view>
        </view>
        <view class="right">
          <text class="tits">订单时间:</text>
          <text class="description-white">{{ item.pay_day }}</text>
        </view>
      </view>

      <view class="p2-line lines">
        <view class="left-content">
          <text class="tits">名义本金:</text
          ><text class="description-white">{{ item.money_nominal }}</text>
        </view>
        <view class="">
          <text class="tits">权利金:</text
          ><text class="description-white">{{ item.money_pay }}</text>
        </view>
      </view>

      <view class="p3-line lines">
        <view class="left-content">
          <text class="tits">买入价:</text
          ><text class="needRed">{{ item.price_buy }}</text>
        </view>
        <view class="">
          <text class="tits">最新价:</text><text class="needRed">--</text>
        </view>
      </view>

      <view class="p4-line lines">
        <view class="left-content">
          <text class="tits">持仓数量:</text
          ><text class="needRed">{{ item.nums }}</text>
        </view>
        <view class="">
          <text class="tits">到期日期:</text
          ><text class="description-white">{{ item.end_day }}</text>
        </view>
      </view>

      <view class="p5-line lines">
        <text class="tits">预计收益:</text><text class="needBigRed">--</text>
        <text class="btn-red">{{ item.st_name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: ["全部订单", "申请中", "持仓中", "行权中", "已结算"],
      clickFooter: 0,
      myOptions: [],
    };
  },
  onShow() {
    this.getData();
  },
  methods: {
    getData() {
      var that = this;
      var value = uni.getStorageSync("poxer_ssid");
      var param = { uid: value };
      //////
      that._post("Works/work_vanilla_list", param, function (res) {
        if (res.status != "1") {
          return;
        }
        that.myOptions = res.data;
      });
    },
    chooseClick(index) {
      this.clickFooter = index;
    },
  },
};
</script>

<style lang="scss" scoped>
// 被点击的样式
.addStyle {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #db1414;
}

.content {
  background-color: #000000;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  .lines {
    padding-left: 50rpx;
  }

  .lines view {
    flex: 1;
  }

  .line {
    padding-left: 23rpx;
    padding-right: 23rpx;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 3rpx solid #272727;
    background: #242426;
  }
}

// 通用样式
.tits {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #aaaaaa;
  margin-right: 10rpx;
}

.lines {
  height: 78rpx;
  border-bottom: 2px solid #272727;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 142rpx;
}

.left-content {
  width: 250rpx;
  margin-right: 40rpx;
}

.needRed {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #db1414;
}

// 预计收益
.needBigRed {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #db1414;
  margin-right: 233rpx;
}

.btn-red {
  width: 92rpx;
  height: 50rpx;
  background: #db1414;
  border-radius: 10rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.description-white {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

// 以上部分通用样式

.p1-line {
  display: flex;
  box-sizing: border-box;
  padding-left: 30rpx;

  .left {
    margin-right: 32rpx;

    .name-white {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .name-gray {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #aaaaaa;
    }
  }
}

.p5-line {
  padding-left: 93rpx;
}
</style>
